<template>
  <div class="container">
    <el-card class="box-card">
      <template #header>
        <div class="header">
          <span>腾讯定位服务</span>
          <!--<el-button type="text">操作按钮</el-button>-->
        </div>
      </template>

      <!-- Form Data -->
      <el-form ref="form" :model="model.form"
        label-width="180px"
        autocomplete="off">

        <el-form-item v-for="(item,index) in model.form" :key="index" :label="item.title">
          <el-input v-if="item.type === 'text'" v-model.trim="item.value"/>
          <div class="fl-tips" v-html="item.tips"/>
        </el-form-item>

        <el-button type="primary" @click="submit">保存</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { AdminConfigGet, AdminConfigPost } from "../../api/server/config";

const model = reactive({
  form: null
})

onMounted(() => {
  getConfigInfo()
})

const getConfigInfo = () => {
  AdminConfigGet({ group: 'location' }).then(({ data: { info } }) => {
    model.form = info
  })
}

const submit = () => {
  AdminConfigPost(model.form).then(() => {
    ElMessage.success('配置信息已更新')
  })
}
</script>

<style scoped>
.container {
  padding: 0 20px;
}

.header span {
  color: rgb(82, 171, 173);
}

.el-button--primary {
  margin-left: 180px;
}

.fl-tips {
  color: #8c939d;
}

.fl-tips .btn {
  color: #3a8ee6;
  cursor: pointer;
}

.fl-tips .btn:hover {
  text-decoration: underline;
}
</style>
